//1.引入样式表
//公用样式 
require('../../assets/css/index.less');
require('../../assets/fonts/iconfont.css');
// weui
require("../../lib/weui/weui.css")
let weui = require("../../lib/weui/weui.js")
// 当前页面样式
require('./circle.less')

//2.引入工具函数 utils
const dom = require('../../utils/dom');
const https = require('../../utils/https');
const local = require('../../utils/local');

// 3.当前页面的js
dom.ready(function () {
    //加载底部菜单
    dom.bMenu('circle')
    https.get("/api/circles/opinionList", res => {
        console.log(res.data);
        res.data.forEach((v, i) => {
            dom.getEle(".main-content").innerHTML += `
            <li class="bcf mb20">
        <div class="weui-cell weui-cell_active">
          <div class="weui-cell__hd">
          <img src="${'http://fitness.h5.itsource.cn:3701' + local.get("userData").imgUrl}" alt="">
          </div>
          <div class="weui-cell__bd" aria-hidden="true" id="b1_txt1">
            <span class="f18" id="nickname">用户名</span>
            <div class="demo_badge_desc f12" id="intro"><span class="province">xx</span>,<span class="city"></span></div>
          </div>
        </div>
        <p class="f12 dynamicText mb10">${v.content}</p>
        <div class="weui-grids df fww jcb"></div>
      </li>
            `
            if (v.imgUrls) {
                console.log(v.imgUrls);
                v.imgUrls.forEach((f, j) => {
                    dom.getEles(".weui-grids")[i].innerHTML += `
                    <a href="javascript:" class="weui-grid" role="button">
                    <img  src="http://fitness.h5.itsource.cn:3701${f}" alt="图片错误">
                    </a>
                    `
                })
            }
        })
    })

    function getprovince() {
        https.get("/api/circles/opinionList", res => {
            console.log(res.data, "data");
            https.get("/api/shared/province", res1 => {
                res.data.forEach((v, i) => {
                    res1.data.forEach((f, j) => {
                        if (f.id == v.releaseProvinceId) {
                            dom.getEles(".province")[i].innerHTML = f.name
                            getcity(f.id, v, i)
                        }
                    })
                })
            })
        })
    }
    getprovince()


    function getcity(provinceid, v, i) {
        https.get(`/api/shared/city?provinceId=${provinceid}`, res => {
            let city = res.data.filter(v => {
                return v.releaseCityId == res.id
            })
            dom.getEles(".city")[i].innerHTML = city[0].name
        })
    }


    function getCourseList() {
        https.get('/api/train/courseList', function (res) {

            let { errno, data } = res;

            if (errno == 0) {
                console.log(data);

                let newCourse = data.filter(v => v.courseId == 1);
                rander('#newsBox', newCourse)


                let courseList = data.filter(v => v.courseId > 1);
                rander('#tmsBox', courseList)
            }
        })
    }
    getCourseList()


    function rander(obj, data) {

        let htmlStr = '';

        data.map(v => {
            htmlStr += `<li class="mt20">
            <img data-id="${v.courseId}" src="http://fitness.h5.itsource.cn:3701${v.imgurl}" alt="">
            <div class="title">
                <h4>${v.name}</h4>
                <p class="c9a">${v.desc}</p>
            </div>
           </li>`
        })
        dom.getEle(obj).innerHTML = htmlStr;
    }


    //方式二: 使用本地存储---2.实现点击事件
    dom.addEvent('#newsBox', function (event) {

        if (event.target.nodeName == 'IMG') {

            let val = event.target.getAttribute('data-id');
            location.href = 'courseDetails.html?id=' + val

            console.log(val);
        }
    })



})


/*
    <a href="javascript:" class="weui-grid" role="button">
              <div class="weui-grid__icon">
              <!-- <img src="./images/icon_tabbar.png" alt=""> -->
              </div>
              <p class="weui-grid__label">Grid</p>
          </a>
          <a href="javascript:" class="weui-grid" role="button">
              <div class="weui-grid__icon">
              <!-- <img src="./images/icon_tabbar.png" alt=""> -->
              </div>
              <p class="weui-grid__label">Grid</p>
          </a>
          <a href="javascript:" class="weui-grid" role="button">
              <div class="weui-grid__icon">
                  <!-- <img src="./images/icon_tabbar.png" alt=""> -->
              </div>
              <p class="weui-grid__label">Grid</p>
          </a>
          <a href="javascript:" class="weui-grid" role="button">
              <div class="weui-grid__icon">
                  <!-- <img src="./images/icon_tabbar.png" alt=""> -->
              </div>
              <p class="weui-grid__label">Grid</p>
          </a>
          <a href="javascript:" class="weui-grid" role="button">
              <div class="weui-grid__icon">
                  <!-- <img src="./images/icon_tabbar.png" alt=""> -->
              </div>
              <p class="weui-grid__label">Grid</p>
          </a>
          <a href="javascript:" class="weui-grid" role="button">
              <div class="weui-grid__icon">
                  <!-- <img src="./images/icon_tabbar.png" alt=""> -->
              </div>
              <p class="weui-grid__label">Grid</p>
          </a>
           */